<template>
  <div class="box5">
    <div class="title">
      <p>未来7天游客数量趋势图</p>
      <img src="../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="echart"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import "echarts-liquidfill";
import { ref, onMounted } from "vue";

let echart = ref();
onMounted(() => {
  let mycharts = echarts.init(echart.value);
  mycharts.setOption({
    color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
    title: {
      text: "Gradient Stacked Area Chart",
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      boundaryGap: false,
      splitLine: false,
    },
    grad: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
    yAxis: {
      splitLine: false,

      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        smooth: true,
      },
      {
        data: [50, 130, 324, 218, 335, 347, 660],
        type: "line",
        smooth: true,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgb(1, 191, 236)",
            },
          ]),
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.box5 {
  width: 100%;
  height: 100%;
  background: url(../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 20px;
}
.title {
  color: white;
  font-size: 20px;
}

.charts {
  height: 300px;
  margin-top: 30px;
}
</style>
